import React from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'
import './index.css';
import Aliyun from "@/pages/user/AliyunOSSUpload/aliyun";
/*import { ContentUtils } from 'braft-utils'*/

export default class EditorDemo extends React.Component {

  state = {
    // 创建一个空的editorState作为初始值
    // editorState: BraftEditor.createEditorState(this.props.content ?? null)
    outputHTML: '<p></p >'
  }

  /**
   * 编辑器改变的时候执行
   * @param editorState
   */
  handleEditorChange = (editorState) => {
    // 更新编辑器的状态，在未输入内容的情况下，会显示一对空标签<p></p>
    this.setState({ editorState })

    // 需要判断输入的内容，如果有输入的内容，设置输入的内容；如果没有输入的内容，将其设置为空字符串''
    // 这样判断的原因是即使是没有输入内容的情况下，editorState.toHTML()也会显示一对空标签，不能直接给表单使用
    // if (!editorState.isEmpty()){
    //   const content = editorState.toHTML()
    //   // 调用父组件传递过来的函数，把编辑框输入的内容传递过去
    //   this.props.setDetails(content);
    // }else {
    //   this.props.setDetails('');
    // }
  }

  componentDidMount() {
    this.isLivinig = true;
    // 3秒后更改编辑器内容
    // setTimeout(this.setEditorContentAsync, 3000)
  }
  componentWillUnmount() {
    this.isLivinig = false;
  }
  handleChange = (editorState) => {
    this.setState({
      editorState: editorState,
      outputHTML: editorState.toHTML()
    })
  }
  /**
   * 图片上传完成以后，执行此方法，用来在编辑器中显示图片
   * @param url
   */
  insertImage = url =>{
    this.setState({
      editorState: ContentUtils.insertMedias(this.state.editorState, [{
        type: 'IMAGE',
        url
      }])
    })
  }

  render () {
    // 自定义控件 --- 使用图片
    const extendControls = [
      {
        key: 'antd-uploader',
        type: 'component',
        component: (
          <Aliyun
            accept="image/*"
            showUploadList={false}
            insertImage={this.insertImage}
          >
            <button type="button" className="control-item button upload-button" data-title="插入图片">
              插入图片
            </button>
          </Aliyun>
        )
      }
    ]
    const { editorState,outputHTML } = this.state
    return (
      <div className="my-component">
        <BraftEditor
          value={editorState}
          onChange={this.handleEditorChange}
        />
      </div>
    )

  }

}
